<template>
	<view class="me-page">
		<view class="me-top">
			<!-- <span class="iconfont iconshezhi" @tap.stop="goPage('password')"></span> -->
			<!-- <view class="data">
				<image src="/static/img/head.jpg" alt="" class="head">
				<view class="man-data">
					<span class="name">李东来</span>
					<span class="name">18885256552</span>
					<span class="name">2020期培训班学员</span>
				</view>
			</view>
			<span class="go">详情</span> -->
		</view>
		<view class="man-box">
			<view class="data">
				<view class="top" @tap="goPage('data')">
					<image :src="photo" alt="" class="head">
					<span class="name">{{nickName}}</span>
					<span class="iconfont icongengduo1" ></span>
				</view>
				<view class="bottom">
					<view class="item">
						<span class="number">{{number1}}</span>
						<span class="name">已完成学时</span>
					</view>
					<view class="item item1">
						<span class="number">{{number2}}</span>
						<span class="name">已获取证书</span>
					</view>
					<view class="item">
						<span class="number">{{number3}}</span>
						<span class="name">已完成测试</span>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="select-box">
			<view class="item" @tap="goPage('password')">
				<span class="iconfont iconmima1 text">修改密码</span>
				<i class="iconfont icongengduo1 right"></i>
			</view>
		</view> -->
		<view class="select-box select-box1">
			<view class="item" v-for="(item,index) in list" @tap="select(index)">
				<span class="iconfont  text" :class="item.icon">{{item.name}}</span>
				<i class="iconfont icongengduo1 right"></i>
			</view>
		</view>
<!-- 		<view class="select-box select-box1">
			<view class="item" @tap="goPage('password')">
				<span class="iconfont iconmima1 text">修改密码</span>
				<i class="iconfont icongengduo1 right"></i>
			</view>
		</view> -->
		<view class="go-out" @tap="goPage('password')">修改密码</view>
		<view class="go-out" @tap="loginOut">退出账号</view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				list:[
					// {name:'我的发票',icon:'icondangan1',path:'myinvoice'},
					{name:'我的证书',icon:'iconzhengshu',path:'certificate',active:'0'},
					{name:'我的学习档案',icon:'icondangan1',path:'archives'},
					{name:'我的收藏',icon:'iconshoutibao',path:'certificate',active:'1'},
					// {name:'修改密码',icon:'icondangan1',path:'archives'},
					// {name:'我的订单',icon:'iconorder',path:'order'},
				],
				photo:'',
				number1:0,
				number2:0,
				number3:0,
				pageNo:1,
				pageSize:10,
				nickName:''
			}
		},
		onLoad() {
			if(!uni.getStorageSync("token")){
				// uni.reLaunch({
				// 	url:"../login/login"
				// })
				uni.navigateTo({
					url:"../login/login"
				})
			}
			
			this.getList1();
			this.getList2();
			this.getList3();
		},
		onShow(){
			this.photo = uni.getStorageSync("photo");
			this.nickName = uni.getStorageSync("nickName");
		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			getList1(){
          		let that = this;
	          this.$http.post("/f/pageUserStudyHours"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                
	                let list = response.data;
	                let a = 0;
	                if(list.length!=0){
	                	list.forEach((item,i)=>{
	                		a+=Number(item.hours || 0);
	                	})
	                }
	                that.number1 = a;
	                // if(list.length!=0){
	                //     list.forEach((item,i)=>{
	                //         if(that.type==1){
	                //             item.title = item.educationCourse.courseName;
	                //             item.new = item.hours;
	                //             item = Object.assign(item,item.educationCourseDb);
	                //         }
	                //         else if(that.type==2){
	                //             item.title = item.courseName;
	                //             item.new = item.name;
	                //             item = Object.assign(item,item.educationModelCertificate);
	                //         }
	                //         else if(that.type==3){
	                //             item.new = item.score;
	                //             item = Object.assign(item,item.educationPaper);
	        
	                //         }
	                        
	                //     })

	                // }
	                
	                // that.start = true;
	                // that.dataList = list;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
	        getList2(){
          		let that = this;
	          this.$http.post("/f/pageUserCertificate"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                that.number2 = response.count;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
	        getList3(){
          		let that = this;
	          this.$http.post("/f/pageUserPaper"+'?pageNo='+this.pageNo+"&pageSize="+this.pageSize)
	          .then(function (response) {
	                that.number3 = response.count;
	              
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
			loginOut(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '请确认是否退出登录?',
				    success: function (res) {
				        if (res.confirm) {
				        	that.$http.get("/f/logout")
			                .then(function (response) {
			                    //Cookies.remove("mobile");
			                    Cookies.remove("nickName");
			                    Cookies.remove("photo");
			                    Cookies.remove("token");
			                    uni.reLaunch({
									url:'../login/login'
								})
								// uni.navigateTo({
								// 	url:'../login/login'
								// })
			                    
			                })
			                .catch(function (error) {
			                    // handle error
			                    console.log(error);
			                })
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			select(index){
				this.list.forEach((item,i)=>{
					if(i==index && item.path!=''){
						if(item.active){
							console.log(item,111)
							uni.navigateTo({
								url:item.path+'?active='+item.active
							})
						}
						else{
							uni.navigateTo({
								url:item.path
							})
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.me-page{
		width:100%;
		height:100%;
		background:#f5f5f5;
		.man-box{
			width:100%;
			height:200rpx;
			.data{
				position:relative;
				width:690rpx;
				margin:0 auto;
				background:#ffffff;
				box-shadow:0 2rpx 10rpx #dcdcdc;
				top:-170rpx;
				height:340rpx;
				border-radius:10rpx;
				box-sizing:border-box;
				padding:30rpx 40rpx;
				.bottom{
					display:flex;
					margin-top:40rpx;
					.item{
						width:33.3%;
						.number{
							width:100%;
							display:block;
							line-height:50rpx;
							font-size:40rpx;
							text-align:center;
							font-weight:600;
							color:#444444;
						}
						.name{
							width:100%;
							display:block;
							line-height:40rpx;
							font-size:28rpx;
							text-align:center;
							color:#777777;
						}
					}
					.item1{
						box-sizing:border-box;
						border-left:1px dashed #c7c7c7;
						border-right:1px dashed #c7c7c7;
					}

				}
				.top{
					display:flex;
					align-items:center;
					.head{
						width:140rpx;
						height:140rpx;
						margin-right:20rpx;
						border-radius:50%;
					}
					.name{
						display:block;
						width:calc(100% - 210rpx);
						font-size:36rpx;
						color:#444444;
						font-weight:600;
					}
					.iconfont{
						color:#b7b7b7;
						font-size:42rpx;
					}
				}
			}
		}
		.dang{
			position:absolute;
			width:450rpx;
			height:90rpx;
			line-height:90rpx;
			text-align:center;
			border-top:1px solid #e2e2e2;
			left:150rpx;
			color:#ababab;
			font-size:32rpx;
			bottom:30rpx;
		}
		.go-out{
			width:100%;
			height:100rpx;
			line-height:100rpx;
			font-size:30rpx;
			color:#555555;
			text-align:center;
			background:#ffffff;
			margin-top:30rpx;
		}
		.select-box{
			width:100%;
			
			.item{
				width:100%;
				height:90rpx;
				background:#ffffff;
				
				display:flex;
				align-items:center;
				justify-content:space-between;
				box-sizing:border-box;
				padding:0 40rpx;
				.text{
					font-size:30rpx;
					color:#555555;
				}
				.text:before{
					margin-right:20rpx;
					font-size:42rpx;
					color:#e9554f;
				}
				.right{
					font-size:42rpx;
					color:#d0d0d0;
				}
			}
		}
		.select-box1{
			background:#ffffff;
			.item{
				padding-left:0;
				margin-left:40rpx;
				width:calc(100% - 40rpx);
				border-bottom:1px #f1f1f1 solid;
			}
			.item:last-child{
				border:0;
			}
		}
		.me-top{
			width:100%;
			position:relative;
			background:#1783dd;
			height:360rpx;
			.iconshezhi{
				position:absolute;
				right:30rpx;
				top:30rpx;
				color:#fff;
				font-size:50rpx;
			}
			.go{
				position:absolute;
				width:140rpx;
				heigth:50rpx;
				line-height:50rpx;
				display:block;
				right:0;
				bottom:80rpx;
				border:1px solid #fff;
				border-radius:30rpx 0 0 30rpx;
				text-align:center;
				color:#ffffff;
				font-size:28rpx;

			}
			.data{
				width:100%;
				padding:0 60rpx;
				position:absolute;
				left:0;
				top:50%;
				transform:translateY(-50%);
				box-sizing:border-box;
				display:flex;
				.head{
					width:150rpx;
					height:150rpx;
					display:block;
					border-radius:50%;
					margin-right:50rpx;
				}
				.man-data{
					width:calc(100% - 220rpx);
					.name{
						line-height:40rpx;
						font-size:30rpx;
						color:#ffffff;
						display:block;
						width:100%;
						margin-top:10rpx;
					}
				}
			}
		}
		.banner{
			width:100%;
			display:block;

		}
	}
</style>
